<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar">
      <view class="status-bar-left">{{ currentTime }}</view>
      <view class="status-bar-right">
        <text class="iconfont icon-signal"></text>
        <text class="iconfont icon-wifi"></text>
        <text class="iconfont icon-battery-full"></text>
      </view>
    </view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-title">我的</view>
      <view class="nav-bar-actions">
        <text class="iconfont icon-qrcode" @click="scanQRCode"></text>
        <text class="iconfont icon-notification" @click="showNotifications"></text>
      </view>
    </view>
    
    <!-- 应用内容区 -->
    <scroll-view class="app-content" scroll-y enable-flex>
      <!-- 用户信息卡片 -->
      <view class="user-profile-card">
        <image class="user-avatar" src="/static/images/avatar.jpg" mode="aspectFill"></image>
        <view class="user-info">
          <view class="user-name">张三</view>
          <view class="user-id">ID: 88564390</view>
          <view class="edit-profile" @click="editProfile">
            <text class="iconfont icon-edit"></text>
            <text class="edit-text">编辑个人资料</text>
          </view>
        </view>
        <text class="iconfont icon-right profile-arrow"></text>
      </view>
      
      <!-- 存储空间信息 -->
      <view class="storage-info-card">
        <view class="storage-text">
          <text class="storage-used">已用存 {{ storageUsed }}</text>
          <text class="storage-total">/ 总空间 {{ storageTotal }}</text>
        </view>
        <view class="progress-bar">
          <view class="progress-bar-fill" :style="{ width: storagePercentage + '%' }"></view>
        </view>
      </view>
      
      <!-- 功能列表 -->
      <view class="function-list">
        <view class="function-item" @click="openRecentUsed">
          <view class="function-icon blue">
            <text class="iconfont icon-time"></text>
          </view>
          <view class="function-title">最近使用</view>
          <text class="iconfont icon-right"></text>
        </view>
        
        <view class="function-item" @click="openMyDownloads">
          <view class="function-icon green">
            <text class="iconfont icon-download"></text>
          </view>
          <view class="function-title">我的下载</view>
          <text class="iconfont icon-right"></text>
        </view>
        
        <view class="function-item" @click="openMyFavorites">
          <view class="function-icon orange">
            <text class="iconfont icon-star"></text>
          </view>
          <view class="function-title">我的收藏</view>
          <text class="iconfont icon-right"></text>
        </view>
      </view>
      
      <!-- VIP会员卡片 -->
      <view class="vip-card">
        <view class="vip-info">
          <view class="vip-icon">
            <text class="iconfont icon-crown"></text>
          </view>
          <view class="vip-text">
            <view class="vip-title">开通VIP会员</view>
            <view class="vip-desc">享受超大存储空间和更多特权</view>
          </view>
        </view>
        <view class="vip-button" @click="openVipPage">立即开通</view>
      </view>
      
      <!-- 邀请好友 -->
      <view class="invite-item" @click="inviteFriends">
        <view class="function-icon pink">
          <text class="iconfont icon-share"></text>
        </view>
        <view class="function-title">邀请好友</view>
        <text class="iconfont icon-right"></text>
      </view>
      
      <!-- 底部占位区域，防止内容被TabBar遮挡 -->
      <view class="tab-bar-placeholder"></view>
    </scroll-view>
    
    <!-- 使用TabBar组件 -->
    <tab-bar :active-tab="'me'" @change="handleTabChange" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import TabBar from '@/components/TabBar.vue';
import { navigateToTab } from '@/utils/navigation';

// 当前时间
const currentTime = ref('9:41');

// 存储信息
const storageUsed = ref('116GB');
const storageTotal = ref('256GB');
const storagePercentage = ref(45); // 百分比宽度

// 更新时间的函数
const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  currentTime.value = `${hours}:${minutes}`;
};

// 定时器
let timer: number;

// 页面加载时启动定时器
onMounted(() => {
  updateTime(); // 初始更新一次
  timer = setInterval(updateTime, 60000); // 每分钟更新一次
});

// 页面卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer);
});

// 处理TabBar组件的切换事件
const handleTabChange = (tab: string) => {
  if (tab !== 'me') {
    // 使用导航工具跳转到对应页面
    navigateToTab(tab);
  }
};

// 扫描二维码
const scanQRCode = () => {
  uni.scanCode({
    success: (res) => {
      console.log('扫描结果：', res);
      uni.showToast({
        title: '扫描成功',
        icon: 'success'
      });
    },
    fail: () => {
      uni.showToast({
        title: '扫描失败',
        icon: 'none'
      });
    }
  });
};

// 显示通知
const showNotifications = () => {
  uni.showToast({
    title: '暂无新通知',
    icon: 'none'
  });
};

// 编辑个人资料
const editProfile = () => {
  uni.showToast({
    title: '编辑个人资料功能开发中',
    icon: 'none'
  });
};

// 打开最近使用
const openRecentUsed = () => {
  uni.showToast({
    title: '最近使用功能开发中',
    icon: 'none'
  });
};

// 打开我的下载
const openMyDownloads = () => {
  uni.showToast({
    title: '我的下载功能开发中',
    icon: 'none'
  });
};

// 打开我的收藏
const openMyFavorites = () => {
  uni.showToast({
    title: '我的收藏功能开发中',
    icon: 'none'
  });
};

// 打开VIP页面
const openVipPage = () => {
  uni.showToast({
    title: 'VIP会员功能开发中',
    icon: 'none'
  });
};

// 邀请好友
const inviteFriends = () => {
  uni.showToast({
    title: '邀请好友功能开发中',
    icon: 'none'
  });
};
</script>

<style>
/* 全局样式变量 */
page {
  --primary-color: #2196F3;
  --secondary-color: #03A9F4;
  --accent-color: #FF9800;
  --text-color: #333;
  --light-gray: #f5f5f5;
  --medium-gray: #e0e0e0;
  --dark-gray: #9e9e9e;
  --danger-color: #f44336;
  --success-color: #4CAF50;
  --vip-color: #FF9800;
  background-color: #fff;
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  background-color: #f7f7f7;
}

/* 顶部状态栏样式 */
.status-bar {
  height: 60rpx;
  width: 100%;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  font-size: 24rpx;
  /* 适配顶部安全区 */
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.status-bar-right {
  display: flex;
  align-items: center;
}

.status-bar-right text {
  margin-left: 8rpx;
  font-size: 24rpx;
}

/* 导航栏样式 */
.nav-bar {
  height: 80rpx;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx;
}

.nav-bar-title {
  font-size: 32rpx;
  font-weight: 600;
}

.nav-bar-actions {
  display: flex;
  align-items: center;
}

.nav-bar-actions text {
  margin-left: 20rpx;
  font-size: 36rpx;
}

/* 应用内容区样式 */
.app-content {
  flex: 1;
  overflow-y: auto;
}

/* 用户信息卡片 */
.user-profile-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 30rpx 24rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 4rpx;
}

.user-id {
  font-size: 24rpx;
  color: var(--dark-gray);
  margin-bottom: 10rpx;
}

.edit-profile {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: var(--primary-color);
}

.edit-text {
  margin-left: 4rpx;
}

.profile-arrow {
  color: var(--dark-gray);
  font-size: 32rpx;
}

/* 存储信息卡片 */
.storage-info-card {
  background-color: #fff;
  padding: 20rpx 24rpx;
  margin-bottom: 20rpx;
}

.storage-text {
  display: flex;
  margin-bottom: 10rpx;
}

.storage-used {
  font-size: 24rpx;
  color: #333;
}

.storage-total {
  font-size: 24rpx;
  color: var(--dark-gray);
}

.progress-bar {
  height: 16rpx;
  background-color: #e0e0e0;
  border-radius: 8rpx;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 8rpx;
}

/* 功能列表 */
.function-list {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.function-item, .invite-item {
  display: flex;
  align-items: center;
  padding: 30rpx 24rpx;
  border-bottom: 1px solid #f0f0f0;
}

.function-item:last-child {
  border-bottom: none;
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
}

.function-icon.blue {
  background-color: #e3f2fd;
  color: #2196F3;
}

.function-icon.green {
  background-color: #e8f5e9;
  color: #4CAF50;
}

.function-icon.orange {
  background-color: #fff3e0;
  color: #FF9800;
}

.function-icon.pink {
  background-color: #fce4ec;
  color: #e91e63;
}

.function-icon text {
  font-size: 40rpx;
}

.function-title {
  flex: 1;
  font-size: 28rpx;
}

.function-item text.iconfont.icon-right, 
.invite-item text.iconfont.icon-right {
  color: var(--dark-gray);
  font-size: 32rpx;
}

/* VIP会员卡片 */
.vip-card {
  background: linear-gradient(to right, #FF9800, #FF5722);
  border-radius: 16rpx;
  margin: 0 24rpx 20rpx;
  padding: 24rpx;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vip-info {
  display: flex;
  align-items: center;
}

.vip-icon {
  margin-right: 16rpx;
}

.vip-icon text {
  font-size: 40rpx;
  color: #fff;
}

.vip-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 4rpx;
}

.vip-desc {
  font-size: 24rpx;
  opacity: 0.9;
}

.vip-button {
  background-color: #fff;
  color: #FF9800;
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: bold;
}

/* 邀请好友 */
.invite-item {
  background-color: #fff;
  margin-bottom: 20rpx;
}

/* 底部占位区域 */
.tab-bar-placeholder {
  height: 100rpx;
  /* 适配底部安全区 */
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}
</style> 